<template>
  <basic-dialog
    :visible.sync="areaDataVisible"
    :title="'区域数据'"
    :show-footer="false"
    :width="'70%'"
    :handleClose="handleCloseDialog"
    :handleOpen="handleOpenDialog"
  >
    <BasicTable
      showPagination
      isCustomSort
      :dataSource="tableInfo.list"
      :columns="tableInfo.columns"
      :loading="tableInfo.loading"
      :tableHeight="480"
      :pageSizes="pageSizes"
      :pagination="pagination"
      :total="total"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
      @customSortChange="handleSortTable"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { AREA_DATA_COLUMNS } from '../constants'
import { areaDataService } from '@api/stock/stockOverflow';

export default {
  name: 'AreaDataDialog',
  mixins: [skusPage],
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    areaDataVisible: {
      type: Boolean,
      default: false
    },
    selectIds: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: AREA_DATA_COLUMNS,
        loading: false
      },
      sortInfo: {},
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 1000 // 当前页码size
      },
      pageSizes: [1000]
    };
  },
  methods: {
    handleOpenDialog () {
      this.getTableData()
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:areaDataVisible', false);
    },
    // 表格排序
    handleSortTable (data) {
      const { prop, order } = data
      this.sortInfo = {
        orderby: prop,
        orderbyType: order
      }
      this.getTableData()
    },
    // 获取表格数据
    async getTableData () {
      const { retData } = await areaDataService(
        { idList: this.selectIds, ...this.paginationParams, ...this.sortInfo },
        state => { this.tableInfo.loading = state }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.total = retData.totalNum;
      }
    },
  }
};
</script>
